<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>代理商
        </b>
        <div class="u-right u-5mt">
          <el-button
            type="success"
            size="small"
            icon="el-icon-document-checked"
            @click="submitForm('objForm')"
            v-if="hasPerm('agencyEditPost')"
            >提交保存</el-button
          >
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)"
            >返回</el-button
          >
        </div>
      </div>
      <el-form
        :model="objForm"
        :rules="rules"
        ref="objForm"
        label-width="100px"
        class="u-form"
      >
        <el-form-item label="绑定用户">
          <el-input
            v-model="objForm.uid"
            placeholder="用户id"
            type="hidden"
            style="display: none"
          ></el-input>
          <el-input
            v-model="objForm.nick_name"
            placeholder="用户昵称"
            disabled
            v-if="objForm.user_id > 0"
          ></el-input>
          <el-button type="text" @click="is_user_show = true"
            >选择用户</el-button
          >
        </el-form-item>

        <!-- <el-form-item label="代理商图片">
          <upload
            file-folder="agency_img"
            :file-arr="fileList"
            list-type="picture-card"
            :limit="1"
            accept="image/jpeg, image/png"
            tips="只能上传jpg/png文件，且不超过4MB"
            @getUploadFiles="getUploadFiles"
          ></upload>
        </el-form-item> -->

        <el-form-item label="用户头像图片">
          <upload
            file-folder="agency_head_img"
            :file-arr="fileList1"
            list-type="picture-card"
            :limit="1"
            accept="image/jpeg, image/png"
            tips="只能上传jpg/png文件，且不超过4MB"
            @getUploadFiles="goodsPhoto"
          ></upload>
        </el-form-item>

        <el-form-item label="是否启用">
          <el-switch
            v-model="objForm.status"
            active-color="#13ce66"
            :active-value="1"
            inactive-color="#666"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>

        <el-form-item label="手机账号" prop="agency_login_username">
          <el-input
            v-model="objForm.agency_login_username"
            placeholder="手机账号"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item
          label="代理商密码"
          prop="agency_login_password"
          v-if="hasPerm('agencyPassBtn')"
        >
          <el-input
            v-model="objForm.agency_login_password"
            placeholder="代理商密码(默认123456)"
          ></el-input>
        </el-form-item> -->

        <el-form-item label="代理商名称" prop="user_name">
          <el-input
            v-model="objForm.agency_title"
            placeholder="代理商名称"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="个人姓名" prop="agency_name">
          <el-input
            v-model="objForm.agency_name"
            placeholder="个人姓名"
          ></el-input>
        </el-form-item>

        <el-form-item label="地址选择">
          <v-distpicker
            @province="province"
            @city="city"
            @area="area"
            :province="objForm.agency_province"
            :city="objForm.agency_city"
            :area="objForm.agency_county"
          ></v-distpicker>
        </el-form-item>

        <el-form-item label="已选地址">
          <el-tag>省 : {{ objForm.agency_province }}</el-tag>
          <el-divider direction="vertical"></el-divider>
          <el-tag type="success">市 : {{ objForm.agency_city }}</el-tag>
          <el-divider direction="vertical"></el-divider>
          <el-tag type="info">区 : {{ objForm.agency_county }}</el-tag>
        </el-form-item>

        <el-form-item label="详细地址">
          <el-input
            v-model="objForm.agency_detail_address"
            placeholder="详细地址"
          ></el-input>
          <el-button
            type="primary"
            size="mini"
            @click="getLngLat()"
            native-type="button"
            :disabled="
              objForm.agency_province == '' ||
              objForm.agency_city == '' ||
              objForm.agency_county == ''
            "
            v-if="hasPerm('agencyAddressPost')"
            >获取坐标</el-button
          >
          <el-button type="text" @click="is_addr_show = true"
            >选取坐标</el-button
          >
        </el-form-item>
        <el-form-item label="范围">
          <el-col :span="11">
            <el-input
              v-model="objForm.agency_range"
              placeholder="范围（单位Km）"
            ></el-input>
          </el-col>
          <el-col class="line" :span="4">(单位Km)</el-col>
        </el-form-item>
        <el-form-item label="经度">
          <el-input
            v-model="objForm.agency_lng"
            placeholder="经度"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="纬度">
          <el-input
            v-model="objForm.agency_lat"
            placeholder="纬度"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 用户弹出框 -->
    <el-dialog title="选择用户" :visible.sync="is_user_show" width="60%">
      <Users :isprops="true" @user_select="user_select"></Users>

      <span slot="footer" class="dialog-footer">
        <el-button @click="is_user_show = false">取 消</el-button>
        <el-button type="primary" @click="is_user_show = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="选择地址" :visible.sync="is_addr_show" width="60%">
      <MapSelect
        :keyword="
          objForm.agency_province +
          ' ' +
          objForm.agency_city +
          ' ' +
          objForm.agency_county +
          ' ' +
          objForm.agency_detail_address
        "
        @setLocation="setLocation"
      ></MapSelect>
      <span slot="footer" class="dialog-footer">
        <el-button @click="is_addr_show = false">取 消</el-button>
        <el-button type="primary" @click="is_addr_show = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import Upload from "@/components/upload/upload";
import MapSelect from "@/components/mapselect/map";
import VDistpicker from "v-distpicker";
import Users from "@/views/user/list.vue";

export default {
  components: {
    Upload,
    MapSelect,
    VDistpicker,
    Users,
  },
  mixins: [commonEdit],
  data() {
    return {
      apiName: "agency",
      backRoute: "agencyIndex", //成功跳转地址
      fileList: [], //临时代理商图片
      fileList1: [], //临时头像
      objForm: {
        id: "",
        user_id: "", //用户id
        agency_title: "", //代理商名称
        agency_img: "", //代理商图片
        agency_name: "", //代理商姓名
        agency_head_img: "", //代理商头像
        agency_login_username: "", //代理商账号
        agency_login_password: "", //代理商密码
        agency_province: "", //省
        agency_city: "", //市
        agency_county: "", //县
        agency_detail_address: "", //详细地址
        agency_lng: "", //经度
        agency_lat: "", //纬度
        agency_range: "10",
        agency_status: 1, //是否启用

        //临时
        nick_name: "",
      },
      is_user_show: false,
      is_addr_show: false,
      rules: {
        agency_title: [
          {
            required: true,
            message: "代理商名称",
            trigger: "blur",
          },
          {
            max: 30,
            message: "最大长度30个字符",
            trigger: "blur",
          },
        ],
        agency_login_username: [
          {
            required: true,
            message: "登录账号",
            trigger: "blur",
          },
        ],
        agency_name: [
          {
            required: true,
            message: "代理商姓名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    setLocation(data) {
      this.objForm.agency_lng = data.lng;
      this.objForm.agency_lat = data.lat;
    },
    getUploadFiles(files) {
      //代理商图片上传回调
      this.fileList = files;
      this.objForm.agency_img = files[0]["url"];
    },
    goodsPhoto(files) {
      //头像上传回调
      this.fileList1 = files;
      this.objForm.agency_head_img = files[0]["url"];
    },
    province(data) {
      //省选择
      this.objForm.agency_province = data.value == "省" ? "" : data.value;
    },
    city(data) {
      //市选择
      this.objForm.agency_city = data.value == "市" ? "" : data.value;
    },
    area(data) {
      //区选择
      this.objForm.agency_county = data.value == "区" ? "" : data.value;
    },
    getLngLat() {
      //获取经纬度
      const self = this;
      var address = {
        address:
          this.objForm.agency_province +
          this.objForm.agency_city +
          this.objForm.agency_county +
          this.objForm.agency_detail_address,
      };

      self.$api[self.apiName].getaddress(address).then((response) => {
        if (response.code == 1) {
          self.objForm.agency_lng = response.data.lng;
          self.objForm.agency_lat = response.data.lat;
        } else {
          self.$message({
            message: response.msg,
            type: "error",
          });
        }
      });
    },
    afterGetInfo() {
      //初始化-设置编辑数据
      if (this.objForm.agency_img) {
        this.fileList = [
          {
            url: this.objForm.agency_img,
          },
        ]; //封面
      }
      if (this.objForm.agency_head_img) {
        this.fileList1 = [
          {
            url: this.objForm.agency_head_img,
          },
        ]; //头像
      }
    },
    user_select(row) {
      //用户选择
      // window.console.log(row);
      this.objForm.user_id = row.id;
      this.objForm.nick_name = row.nick_name;
      this.objForm.agency_title = row.nick_name;
      this.objForm.agency_login_username = row.phone;
      this.objForm.agency_head_img = row.head_img;
      this.fileList1 = [
        {
          url: row.head_img,
        },
      ]; //头像
      this.is_user_show = false; //关闭弹框
    },
  },
  created() {
    if (this.$route.params.id) {
      this.objForm.id = this.$route.params.id;
    }
  },
};
</script>
<style>
.distpicker-address-wrapper select {
  font-size: 100%;
}
</style>
